<template>
  <div class="competition-table" id="Print">
    <h2>{{ title }}</h2>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="teamName" label="队伍名称" width="100" />
      <el-table-column prop="teamAbbreviation" label="队伍简称" width="100" />
      <el-table-column prop="teamLeader" label="负责人" width="100" />
      <el-table-column prop="phone" label="联系电话" width="120" />
      <el-table-column prop="email" label="邮箱" width="200" />
      <el-table-column prop="address" label="地址" width="200"/>
      <el-table-column label="参赛责任书（等照片）" width="150">
        <template #default="{ row }">
          <img v-if="row.image" :src="serverUrl + row.image" alt="Responsibility Book" class="image" />
        </template>
      </el-table-column>
      <el-table-column label="职务" width="100">
        <template #default="{ row }">
          <span>{{ row.staff.role }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成员姓名" width="100">
        <template #default="{ row }">
          <span>{{ row.staff.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" width="150">
        <template #default="{ row }">
          <span>{{ row.staff.idcard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" width="120">
        <template #default="{ row }">
          <span>{{ row.staff.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="成员照片" width="150">
        <template #default="{ row }">
            <img v-if="row.staff.image" :src="serverUrl + row.staff.image" alt="Member Photo" class="image" />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 打印按钮 -->
  <el-button type="primary" v-print="printConfig" class="print-button-container">打印</el-button>
  <el-button type="primary" @click="handleCancel" class="print-button-container">取消</el-button>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const route = useRoute();
const router = useRouter();

const matchid = route.query.matchid;

const title = ref('');

const token = localStorage.getItem('adminToken');

const tableData = ref([]);

// 定义服务器的 URL
const serverUrl = ref('http://back1.idcfengye.com:15173');

// 获取比赛名称
async function fetchmatch() {
  const id = matchid;
  try{
    const response = await axios.get(`http://back1.idcfengye.com:15173/competition/match/${id}`);
    const matchname = response.data.match;
    matchname.map(match => {
      title.value = match.title;
    });
  }catch(error){
    console.log(error);
  }
}

fetchmatch();


//通过本比赛的某个项目的id找到对应人员的申报
async function fetchteamstaff() {
  try {
    const response = await axios.get(`http://back1.idcfengye.com:15173/teamproject/staff/${matchid}`, {
      headers: {
        'Authorization': 'Bearer ' + token
      }
    });

    tableData.value = response.data.data;
  } catch (error) {
    console.error('未找到队伍信息:', error);
  }
}

fetchteamstaff();


function handleCancel() {
  router.push({ path: '/admin/viewproject', query: { id: matchid } });
}

const printConfig = {
  id: 'Print', // 指定打印的元素ID
  extraCss:
    'https://cdn.example.com/print-style1.css,https://cdn.example.com/print-style2.css',  // 替换为有效的CSS文件路径

}
</script>

<style scoped>
.competition-table {
  text-align: center;
  margin: 0 auto;
  /* 使表格居中 */
  max-width: 100%;
  /* 确保表格不超过容器宽度 */
}

.print-button-container {
  width: 100px;
  margin-left: 48%;
  margin-top: 10px;
}

@media print {
  .difficulty-table {
    width: 100%;
  }

  .el-table {
    width: 100% !important;
  }

  .el-table__body-wrapper {
    overflow: visible !important;
  }

  .print-button-container {
    display: none;
  }

  /* 其他打印时的样式调整 */
}
.image{
  width: 100px;
  height: 50px;
}
</style>